<template>
    <div class="page_container">
        <div class="music-list-page">
            <div class="music-list-top">
                <div class="top-line">
                    <div class="music-list-info">
                        <div class="top">
                            <div class="left">
                                <div class="img"></div>
                            </div>
                            <div class="right">
                                <div class="title text-ellipsis">地铁随身听 | 心跳加速的瞬间</div>
                                <div class="user">
                                    <div class="avatar"></div>
                                    <div class="username">mimimi</div>
                                </div>
                            </div>
                        </div>
                        <div class="bottom">
                            <div class="description">公交车每隔几分钟就驶过一辆，不会因为任何人而驻足，一站一站好似在走，只是在走的过程中，我在想，我是否该走？</div>
                        </div>
                    </div>
                </div>
                <div class="btn-line">
                    <div class="collect">
                        <div class="icon" :style="`--icon: url(${ base_url }/static/icon/collect-white-star.svg); --icon-size: 100%`"></div>
                        <div class="text">收藏</div>
                    </div>
                </div>
            </div>
            <div class="music-list-bottom">
                <MusicListTopLine></MusicListTopLine>
                <div class="bottom-line">
                    <MusicList></MusicList>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { base_url } from '@/server/config';

import MusicList from '@/component/list/MusicList.vue';
import MusicListTopLine from '@/component/line/MusicListTopLine.vue';
</script>

<style scoped lang="less">
.music-list-page .music-list-top {
    box-sizing: border-box;
    width: 100%;
    height: 80vw;
    background-image: var(--music-list-page-bg-color);
    padding: 5vw;
    display: flex;
    flex-direction: column;
    gap: 5vw;

    .top-line {
        .music-list-info {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 5vw;
    
            .top {
                width: 100%;
                display: flex;
                align-items: center;
                gap: 3vw;
    
                .left {
                    --size: 25vw;
                    width: var(--size);
                    height: var(--size);
                    flex-shrink: 0;
    
                    .img {
                        width: 100%;
                        height: 100%;
                        border-radius: 5%;
                        background-color: #aaa;
                    }
                }
    
                .right {
                    flex: 1;
                    min-width: 0;
                    display: flex;
                    flex-direction: column;
                    gap: 3vw;
    
                    .title {
                        font-size: 4vw;
                        color: var(--music-list-page-top-title-color);
                    }
    
                    .user {
                        display: flex;
                        align-items: center;
                        gap: 2vw;
    
                        .avatar {
                            --size: 7vw;
                            background-color: var(--music-list-page-top-username-color);
                        }
    
                        .username {
                            font-size: 3vw;
                            color: var(--music-list-page-top-username-color);
                        }
                    }
                }
            }
    
            .bottom {
                .description {
                    font-size: 3.5vw;
                    color: var(--music-list-page-top-description-color);
                }
            }
        }
    }
    
    .btn-line {
        box-sizing: border-box;
        width: 100%;
        
        .collect {
            --h: 10vw;
            width: 100%;
            height: var(--h);
            background-color: var(--music-list-page-collect-btn-color);
            border-radius: var(--h);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2vw;

            .icon {
                --size: 5vw;
                width: var(--size);
                height: var(--size);
            }

            .text {
                font-size: 3.5vw;
                color: #fff;
            }
        }
    }
}

.music-list-page .music-list-bottom {
    box-sizing: border-box;
    width: 100%;
    min-height: 50vh;
    background-color: #fff;
    padding: 5vw;
    border-radius: 5vw;
    transform: translateY(-10vw);
}
</style>